<!-- 规格spec组件 -->
<template>
    <el-form class="spec-list" @keyup.enter.stop>
        <!-- 属性 -->
        <el-form-item :label="t('shop.goodsSpec.specAttr')" label-width="160">
            <div>
                <el-button type="primary" @click="addSpecRow" class="spec-list-attr">
                    {{ t('shop.goodsSpec.addSpecAttr') }}
                </el-button>
            </div>
            <div class="spec-list-item" v-for="(item, index) in state.specList" :key="index">
                <div class="spec-list-item-main">
                    <div class="spec-list-item-layout">
                        <span class="span">{{ t('shop.goodsSpec.attrName') }}</span>
                        <view style="display: flex">
                            <el-input size="small" v-model="item.name" class="input" :autosize="true" />
                            <Icon name="el-icon-Delete" @click="removeSpecRow(index)" class="spec-list-item-removeIcon" />
                        </view>
                    </div>
                    <div class="spec-list-item-layout">
                        <span class="span">{{ $t('shop.goodsSpec.attrValue') }}</span>
                        <div class="spec-list-item-tags">
                            <view>
                                <el-tag
                                    class="spec-list-item-tag"
                                    closable
                                    v-for="(subitem, i) in item.value"
                                    :key="i"
                                    @close="removeSpecAttr(index, i)"
                                    hit
                                >
                                    <view style="display: flex; align-items: center">
                                        <Icon
                                            name="el-icon-Edit"
                                            color="#8595F4"
                                            size="15"
                                            style="margin-right: 10px"
                                            @click="editSpecAttr(index, i)"
                                        />
                                        {{ subitem }}
                                    </view>
                                </el-tag>
                                <el-button size="small" icon="el-icon-Plus" @click="addSpecAttr(index)"></el-button>
                            </view>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, watch } from 'vue'
import { i18n } from '/@/lang'

const { t } = i18n.global

// 规格属性
type specList = {
    name: string
    value: string[]
}

interface Prop {
    // 规格属性值
    modelValue: specList[]
}

const props = withDefaults(defineProps<Prop>(), {
    modelValue: () => [
        {
            name: '',
            value: [],
        },
    ],
})

const state = reactive({
    specList: props.modelValue,
})

const emits = defineEmits<{
    (e: 'update:modelValue', value: object): void
}>()

emits('update:modelValue', state.specList)

// 添加规格行
const addSpecRow = () => {
    state.specList.push({
        name: '',
        value: [],
    })
}

// 删除规格行
const removeSpecRow = (i: number) => {
    const specListLength = state.specList.length
    if (specListLength === 1) {
        ElMessage({ message: t('shop.goodsSpec.Keep at least one valid specification group'), type: 'error' })
        return
    }
    ElMessageBox.confirm(
        t('shop.goodsSpec.Are you sure you want to delete the data for this specification group? This operation cannot be restored'),
        t('shop.goodsSpec.warning'),
        {
            confirmButtonText: t('shop.goodsSpec.confirm'),
            cancelButtonText: t('shop.goodsSpec.cancel'),
            type: 'warning',
        }
    )
        .then(() => {
            state.specList.splice(i, 1)
        })
        .catch(() => {})

    return state.specList
}

// 添加规格属性值
const addSpecAttr = (index: number) => {
    ElMessageBox.prompt(t('shop.goodsSpec.inputSpecValue'), t('shop.goodsSpec.addSpecValue'), {
        confirmButtonText: t('shop.goodsSpec.confirm'),
        cancelButtonText: t('shop.goodsSpec.cancel'),
        inputPattern: /^\S+$/,
        inputErrorMessage: t('shop.goodsSpec.The specification value cannot be empty'),
        closeOnClickModal: false,
    })
        .then(({ value }: { value: string }) => {
            value = value.trim()
            state.specList[index].value.push(value)
        })
        .catch(() => {})
}

// 编辑规格属性值
const editSpecAttr = (index: number, key: number) => {
    ElMessageBox.prompt('', t('shop.goodsSpec.editSpecValue'), {
        confirmButtonText: t('shop.goodsSpec.confirm'),
        cancelButtonText: t('shop.goodsSpec.cancel'),
        inputPattern: /^\S+$/,
        inputErrorMessage: t('shop.goodsSpec.The specification value cannot be empty'),
        closeOnClickModal: false,
        inputValue: state.specList[index].value[key],
    })
        .then(({ value }: { value: string }) => {
            value = value.trim()
            state.specList[index].value[key] = value
        })
        .catch(() => {})
}

// 删除规格属性值
const removeSpecAttr = (index: number, key: number) => {
    const valueLength = state.specList[index].value.length
    if (valueLength === 1) {
        ElMessage({ message: t('shop.goodsSpec.Keep at least one valid specification'), type: 'error' })
        return
    }
    ElMessageBox.confirm(
        t('shop.goodsSpec.Are you sure you want to delete this specification value? This operation cannot be restored'),
        t('shop.goodsSpec.warning'),
        {
            confirmButtonText: t('shop.goodsSpec.confirm'),
            cancelButtonText: t('shop.goodsSpec.cancel'),
            type: 'warning',
        }
    )
        .then(() => {
            state.specList[index].value.splice(key, 1)
        })
        .catch(() => {})
}

// 初始化规格信息
watch(
    () => props.modelValue,
    (newVal) => {
        state.specList = newVal

        emits('update:modelValue', newVal)
    }
)
</script>

<style lang="scss" scoped>
.spec-type {
    margin-bottom: 20px;
}

.spec-list {
    margin-bottom: 20px;

    &-template-tip {
        margin-bottom: 20px;
        @media screen and (min-width: 1024px) {
            margin-left: 70px;
        }
    }

    &-attr {
        margin-bottom: 20px;
    }

    &-item {
        width: 70%;
    }

    &-head {
        margin-bottom: 15px;
    }

    &-item {
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 20px 50px 50px 20px;

        @media screen and (min-width: 240px) {
            border: 1px solid #eee;
        }

        &-main {
            flex: 1;
        }
        &-removeIcon {
            margin-left: 20px;
            color: #f56c6c;
            cursor: pointer;
        }
        &-layout {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;

            &:last-child {
                margin-bottom: 0;
            }
            .input {
                width: auto;
            }
            .span {
                font-size: 14px;
                font-weight: bold;
                margin-right: 10px;
            }
        }
        &-tag {
            margin-right: 10px;
            // cursor: pointer;
        }
        &-text {
            color: red;
        }
    }
}
</style>
